<template>
  <div class="carousel_wrap h-100">
    <div class="text-right text-white" @click="close" style="font-weight: 600;line-height: 30px;">
      <i class="iconfont icon-close" style="font-size:25px;"></i>
    </div>
    <el-carousel :autoplay="false" :interval="6000" arrow="always" class="text-center " style="overflow-y: hidden">
      <el-carousel-item  v-for="(file,index) in files" :key="index">
        <template>
          <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="overflow: auto;" v-if="file.OriginUrl.indexOf('.pdf')==-1">
            <img ref="devImg" :src="server+file.OriginUrl">
          </div>
          <iframe v-else class="h-100 w-100" :src="server+file.OriginUrl" scroll="no" border="0" frameborder="0"></iframe>
        </template>
<!--        v-if="fileDelBtn" 权限后面加-->
        <i  class="iconfont icon-false text-warning" @click="delFile(file,index)"
           style="font-size:20px;font-weight:800;position: absolute;right: 35px; top:10px;line-height: normal"></i>
        <i class="iconfont icon-xianshi txt_blue2 font24" @click="queryPDF(server+file.OriginUrl)"
           style="font-size:20px;font-weight:800;position: absolute;right: 6px; top:10px;line-height: normal"></i>
        <ul v-if="file.OriginUrl.indexOf('.pdf')==-1" class="d-flex flex-column p_absolute imgScale" style="bottom: 0;right: 10px;">
          <li  class="mb-2 " @click="scaleImg('add',index)"><i class="iconfont icon-jia1 btn_disabled"></i></li>
          <li  @click="scaleImg('minus',index)"><i class="iconfont icon-minus"></i></li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import api from 'api/api'
  export default {
    components: {},
    props: {
      files:{type:Array, default:[]},
      delFileUrl:{type:String, default:''},
      type:{type:String, default:'box'},
      fileDelBtn:false,
      devId:null
    },
    data() {
      return {
        imgIndex:0,
        imgScale:[],
        server:api.ajaxServe,
      }
    },
    watch: {
      files(v){
        for(let i=0;i<v.length;i++){
          this.imgScale[i]=1
        }
        this.imgScale.splice(0,0)
      }
    },
    computed: {},
    methods: {
      queryPDF(url){
        window.open(url)
      },
      scaleImg(type,index){
        if(this.imgScale[index]==0.2&&type=='minus'){
          return
        }
        if(this.imgScale[index]==2&&type=='add'){
          return
        }
        if(type=='minus'){
          this.imgScale[index]=(this.imgScale[index]-0.2).toFixed(1)
          this.$refs.devImg[index].style.transform=`scale(${this.imgScale[index]})`
        }else {
          this.imgScale[index]=(this.imgScale[index]-0+0.2).toFixed(1)
          this.$refs.devImg[index].style.transform=`scale(${this.imgScale[index]})`
        }
      },
      close(){
        this.$emit('closeFileRead',false)
      },
      delFile(file,index){//删除附件
        let data={}
        if(this.type=='box'){
          data={boxId:this.devId}
        }else if(this.type=='pole'){
          data={poleId:this.devId}
        }else if(this.type=='work'){
          data={workId:this.devId}
        }
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
            .then(() => {
              api.fetchSimple(this.delFileUrl,{...data,...{fileIds:[file.Id]}})
                  .then(r=>{
                    this.files.splice(index,1)
                    if(this.files.length==0){
                      this.close()
                    }
                  })
            })
      },
    },
    created() {
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .el-carousel{height:100%;}
  .el-carousel__container{height:100%;}
  .el-carousel__item{text-align: center;background-color: rgba(0,0,0,.1);}
  .imgScale{
    li{background:#F2F2F2;width:30px;height:30px;border-radius:100%;text-align:center;line-height:30px;
     i{font-size:18px;margin:0;color:#999;}
    }
  }
</style>
